<script setup lang="ts" name="menu-management">
import { departmentDelete, departmentList } from '@fl/api/iam-api'
import ButtonItem from '@fl/components/button-item.vue'
import { ElCard, ElTable, ElTableColumn } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { TextDict, TypeDict } from '../constant'
import { useTable as useTable2 } from '../hooks/use-table'
import AddMenu from './component/add-menu.vue'

const route = useRoute()
const _deptId = route.query?.deptId as string
const deptId = ref(_deptId ?? '')

const { arrayToTree } = useTable2()
const detail = reactive<any>({})
const show = ref(false)
const addRef = ref()
const tableData = ref<any>([])
const loading = ref<boolean>(false)
const tableRef = ref(null)
const { go } = useRouter()

const btns = [
    {
        label: '编辑',
        text: true,
        value: 'edit',
    },
    {
        label: '删除',
        text: true,
        value: 'delete',
    },
]

// function load(row: any, _treeNode: unknown, resolve: ((date: any) => void) | undefined) {
//     if (row.childList.length)
//         resolve?.(row.childList)
// }

function doAdd() {
    show.value = true
    detail.value = null
}

function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            show.value = true
            detail.value = row
            break
        case 'delete':
            doDel(row.deptId)
            break
        default:
            break
    }
}

function doDel(deptId: number) {
    departmentDelete(deptId).then((res: any) => {
        if (res.code === 200) {
            getData()
            ElMessage.success('操作成功')
        }
        else { ElMessage({ message: res.msg, type: 'error' }) }
    })
}

async function getData() {
    tableData.value = []
    loading.value = true
    departmentList({ enterprise: deptId.value }).then((res: any) => {
        tableData.value = cloneDeep(arrayToTree(res?.data, 'parentId', 'deptId'))
    }).finally(() => {
        loading.value = false
    })
}
getData()

onMounted(() => {
    // 拖拽处理
    // document.body.ondrop = function (event) {
    //     event.preventDefault()
    //     event.stopPropagation()
    // }
})

function goback() {
    go(-1)
}
</script>

<template>
    <ElCard mb-20>
        <div class="mb-20"
             flex
        >
            <ElButton class="mb-20"
                      @click="goback"
            >
                返回组织机构
            </ElButton>

            <ElButton type="primary"
                      @click="doAdd"
            >
                + 新增部门
            </ElButton>
        </div>

        <!-- :load="load" -->
        <ElTable ref="tableRef"
                 v-loading="loading"
                 :data="tableData"
                 style="width: 100%"
                 row-key="deptId"
                 lazy
                 border
                 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                 :default-expand-all="true"
        >
            <ElTableColumn label="部门名称">
                <template #default="scope">
                    {{ scope.row.deptName }}
                    <span style="display: none;">
                        {{ JSON.stringify({ deptId: scope.row.deptId, parentId: scope.row.parentId }) }}
                    </span>
                </template>
            </ElTableColumn>

            <ElTableColumn prop="orderNum"
                           label="排序"
            />

            <ElTableColumn label="状态">
                <template #default="scope">
                    <ElTag :type="TypeDict[scope.row.status]">
                        {{ TextDict[scope.row.status] }}
                    </ElTag>
                </template>
            </ElTableColumn>

            <ElTableColumn prop="createTime"
                           label="创建时间"
            />

            <ElTableColumn label="操作">
                <template #default="scope">
                    <ButtonItem v-if="scope.row.parentId !== 0"
                                :btns="btns"
                                @btn-click="doAction($event, scope.row)"
                    />
                </template>
            </ElTableColumn>
        </ElTable>
    </ElCard>

    <AddMenu ref="addRef"
             v-model="show"
             v-model:show="show"
             :data="detail"
             :dept-id="deptId"
             template
             @confirm="getData"
    />
</template>
